body {
  margin: 0;
  box-sizing: border-box;
  height: 100vh;
  font-size: 0.5vw;
}

.wrapper {
  width: 100%;
  height: 100%;
  display: grid;
  overflow: clip;
}
.wrapper #play:checked ~ #scene,
.wrapper #play:checked ~ #scene div,
.wrapper #play:checked ~ #scene div::before {
  animation-play-state: running;
}
.wrapper #bg {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(3deg, #000 5%, rgba(0, 0, 0, 0.5333333333) 50%, rgba(0, 0, 0, 0) 90%), linear-gradient(45deg, #f40, #f08);
  transition: all 3s ease-out;
}
.wrapper #scene {
  position: absolute;
  width: 100em;
  display: grid;
  place-self: center;
  place-items: center;
  aspect-ratio: 1;
  perspective: 250em;
  justify-items: center;
  animation: focal 10s ease-in-out alternate infinite paused;
  --hue: -50deg;
  filter: brightness(0.5) sepia() hue-rotate(var(--hue)) contrast(180%) saturate(4);
  transition: filter 1s ease-in;
}
.wrapper #scene div {
  mix-blend-mode: difference;
  position: absolute;
  animation: spin 8s linear infinite paused;
}
.wrapper #scene div::before {
  content: "";
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  background: linear-gradient(var(--gradAngle), var(--clr1), var(--clr2));
  animation: hue 7s linear infinite paused;
}
.wrapper #scene * {
  transform-style: preserve-3d;
}
@media (orientation: portrait) {
  .wrapper #scene body {
    font-size: 0.4vh;
  }
  .wrapper #scene nav label {
    width: 20em;
    margin: 3em 3em 0 0;
  }
  .wrapper #scene #pauseBtn {
    width: 20em;
    height: 20em;
    margin: 3em;
  }
}
.wrapper #scene #octaTop {
  width: 60.9760491457em;
  aspect-ratio: 1;
  top: -2.8996254167em;
  overflow: hidden;
  --arrange: rotateX(90deg);
  --gradAngle: 0;
  --clr1: #fd4;
  --clr2: #077;
}
.wrapper #scene #octaTop::before {
  transform: rotate(45deg);
}
.wrapper #scene .triangle1 {
  width: 25.2571065361em;
  height: 14.438848903em;
  top: 27.5883991562em;
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
          clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top;
  --arrange: rotateY(calc(var(--step) * 45deg)) translateZ(30.4880245729em)
    rotateX(61.0004212773deg);
  --gradAngle: 210deg;
  --clr1: hsl(calc(10deg + 45deg * var(--step)) 100% 50%);
  --clr2: hsl(calc(70deg + 45deg * var(--step)) 100% 50%);
  border-top: 1px solid #ff0;
}
.wrapper #scene .rhomb {
  width: 33em;
  height: 24.3344168606em;
  top: 27.5883991562em;
  --arrange: rotateY(calc(22.5deg + var(--step) * 45deg)) translateZ(33em)
    rotateX(44.3147117236deg);
  -webkit-clip-path: polygon(50% 0, 0 40.2030810539%, 50% 100%, 100% 40.2030810539%);
          clip-path: polygon(50% 0, 0 40.2030810539%, 50% 100%, 100% 40.2030810539%);
  --gradAngle: 240deg;
  --clr1: hsl(calc(180deg + 45deg * var(--step)) 100% 50%);
  --clr2: hsl(calc(240deg + 45deg * var(--step)) 100% 50%);
}
.wrapper #scene .rhomb::before {
  background-color: #0f0;
}
.wrapper #scene .twinGon {
  width: 19.5090322016em;
  height: 12.4088509445em;
  transform-origin: 50% 100%;
  --arrange: rotateY(
      calc(45deg * (var(--step) + var(--halfStep)) + 11.25deg)
    )
    translateZ(49.0392640202em) rotateX(32.9604489842deg);
  justify-self: center;
  bottom: 55em;
  -webkit-clip-path: polygon(0 100%, 100% 100%, calc(50% - (50% - percent(0.0688342216)) * var(--dir)) 0);
          clip-path: polygon(0 100%, 100% 100%, calc(50% - (50% - percent(0.0688342216)) * var(--dir)) 0);
  padding: 0.1em;
  --gradAngle: 280deg;
  --clr1: hsl(
    calc(90deg + 45deg * (var(--step) + var(--halfStep))) 100% 50%
  );
  --clr2: hsl(
    calc(150deg + 45deg * (var(--step) + var(--halfStep))) 100% 50%
  );
  border-bottom: 1px solid #ff0;
}
.wrapper #scene .twinGon:before {
  background: #f80;
}
.wrapper #scene .rhomBase {
  bottom: 13em;
  height: 65.2993108693em;
  width: 14em;
  -webkit-clip-path: polygon(50% 0, 100% 66.6666666667%, 50% 100%, 0 66.6666666667%);
          clip-path: polygon(50% 0, 100% 66.6666666667%, 50% 100%, 0 66.6666666667%);
  transform-origin: bottom;
  --arrange: rotateY(calc(22.5deg + 45deg * var(--step)))
    rotateX(-49.9697407281deg);
  --gradAngle: -30deg;
  --clr1: hsl(calc(70deg + 45deg * var(--step)) 100% 50%);
  --clr2: hsl(calc(200deg + 45deg * var(--step)) 100% 50%);
}
.wrapper #scene .rhomBase:before {
  background: hsl(calc(45deg * var(--step)), 100%, 50%);
}
.wrapper #scene .twinBase {
  width: 19.5090322016em;
  height: 42.030623205em;
  top: 45em;
  background: cyan;
  transform-origin: top;
  --arrange: rotateY(
      calc(45deg * (var(--step) + var(--halfStep)) + 11.25deg)
    )
    translateZ(49.0392640202em) rotateX(-48.2270123507deg);
  -webkit-clip-path: polygon(0 0, 100% 0, calc(50% - (50% - percent(0.3196013)) * var(--dir)) 100%);
          clip-path: polygon(0 0, 100% 0, calc(50% - (50% - percent(0.3196013)) * var(--dir)) 100%);
  --gradAngle: 60deg;
  --clr1: hsl(
    calc(270deg + 45deg * (var(--step) + var(--halfStep))) 100% 40%
  );
  --clr2: hsl(
    calc(400deg + 45deg * (var(--step) + var(--halfStep))) 100% 40%
  );
}
.wrapper #scene div:nth-child(8n+1) {
  --step: 1;
}
.wrapper #scene div:nth-child(8n+2) {
  --step: 2;
}
.wrapper #scene div:nth-child(8n+3) {
  --step: 3;
}
.wrapper #scene div:nth-child(8n+4) {
  --step: 4;
}
.wrapper #scene div:nth-child(8n+5) {
  --step: 5;
}
.wrapper #scene div:nth-child(8n+6) {
  --step: 6;
}
.wrapper #scene div:nth-child(8n+7) {
  --step: 7;
}
.wrapper #scene div:nth-child(8n+8) {
  --step: 8;
}
.wrapper #scene .left {
  --dir: -1;
  --halfStep: 0.5;
}
.wrapper #scene .right {
  --dir: 1;
  --halfStep: 0;
}
.wrapper #playBtn {
  display: flex;
  width: 40em;
  place-self: center;
  aspect-ratio: 1;
  position: absolute;
  background-image: conic-gradient(from 180deg, rgba(255, 255, 255, 0.2666666667), rgba(255, 255, 255, 0.7333333333)), repeating-conic-gradient(rgba(255, 255, 255, 0.2666666667), rgba(255, 255, 255, 0.7333333333) 5%);
  background-size: 60em 40em;
  background-position-x: 10em;
  -webkit-clip-path: polygon(0 25%, 25% 0, 100% 50%, 25% 100%, 0 75%);
          clip-path: polygon(0 25%, 25% 0, 100% 50%, 25% 100%, 0 75%);
  box-shadow: inset 10em 0 0 0 rgba(136, 136, 136, 0);
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.wrapper #playBtn:hover {
  background-color: #fff;
  box-shadow: inset 10em 0 0 0 #888;
}
.wrapper nav {
  position: absolute;
  display: flex;
  border: none;
  pointer-events: none;
  width: 100%;
}
.wrapper nav label {
  pointer-events: all;
  margin: 2em 2em 0 0;
  width: 12em;
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  transition: filter 0.5s ease-in-out;
  filter: saturate(1) drop-shadow(0 0 0 var(--auraColor)) drop-shadow(0 0 0 var(--auraColor));
}
.wrapper nav label::after {
  content: "";
  position: absolute;
  inset: 14.64%;
  transform: rotate(22.5deg);
}
.wrapper nav label:not(#pauseBtn)::before {
  inset: 0;
  background-color: var(--gemColor);
  transform: rotate(45deg);
  transition: transform 0.3s ease-in-out;
}
.wrapper nav label div {
  position: absolute;
  inset: 0;
  transform: rotate(45deg);
  overflow: hidden;
}
.wrapper nav label div::before {
  inset: 0 30%;
}
.wrapper nav label div::after {
  inset: 30% 0;
}
.wrapper nav label::after, .wrapper nav label div, .wrapper nav label div::before, .wrapper nav label div::after {
  mix-blend-mode: difference;
}
.wrapper nav label::after, .wrapper nav label div::before, .wrapper nav label div::after {
  background-color: var(--gemColor);
}
.wrapper nav label::before, .wrapper nav label::after, .wrapper nav label div::before, .wrapper nav label div::after {
  content: "";
  position: absolute;
}
.wrapper nav #pauseBtn {
  position: absolute;
  margin-left: 2em;
  cursor: pointer;
}
.wrapper nav #pauseBtn::before {
  content: "";
  position: absolute;
  inset: 3em 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.6), #fff 50%, rgba(255, 255, 255, 0) 50%);
  background-size: 66.6666666667%;
  background-color: rgba(255, 255, 255, 0.2);
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-color: #fff;
  opacity: 0.75;
  transition: all 0.3s ease-in-out;
}
.wrapper nav #pauseBtn:hover::before {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0);
  background-color: rgba(255, 255, 255, 0);
  transform: scaleX(0.75);
}
.wrapper nav #red {
  --gemColor: #800;
  --glowColor: #f00;
  --auraColor: #f88;
  margin-left: auto;
  cursor: pointer;
}
.wrapper nav #green {
  --gemColor: #080;
  --glowColor: #0f0;
  --auraColor: #0f0;
  cursor: pointer;
}
.wrapper nav #blue {
  --gemColor: #008;
  --glowColor: #00f;
  --auraColor: #0ff;
  cursor: pointer;
}
.wrapper #ruby:checked ~ #bg {
  filter: hue-rotate(0deg);
}
.wrapper #ruby:checked ~ #scene {
  --hue: -50deg;
}
.wrapper #emerald:checked ~ #bg {
  filter: hue-rotate(120deg);
}
.wrapper #emerald:checked ~ #scene {
  --hue: 70deg;
}
.wrapper #sapphire:checked ~ #bg {
  filter: hue-rotate(240deg);
}
.wrapper #sapphire:checked ~ #scene {
  --hue: 190deg;
}
.wrapper #ruby:checked ~ nav #red,
.wrapper #emerald:checked ~ nav #green,
.wrapper #sapphire:checked ~ nav #blue {
  filter: saturate(2) drop-shadow(0 0 0 var(--glowColor)) drop-shadow(0 0 0 var(--glowColor));
}
.wrapper #ruby:checked ~ nav #red::before,
.wrapper #emerald:checked ~ nav #green::before,
.wrapper #sapphire:checked ~ nav #blue::before {
  background: radial-gradient(var(--glowColor), #000);
}
.wrapper #ruby:not(:checked):hover ~ nav #red,
.wrapper #emerald:not(:checked):hover ~ nav #green,
.wrapper #sapphire:not(:checked):hover ~ nav #blue {
  filter: saturate(1) drop-shadow(0 0 1em var(--glowColor)) drop-shadow(0 0 2em var(--glowColor));
}
.wrapper input,
.wrapper #play:checked ~ #playBtn,
.wrapper #pause:checked ~ nav #pauseBtn {
  display: none;
}
.wrapper #pause:checked ~ #playBtn,
.wrapper #paly:checked ~ nav #pauseBtn {
  display: grid;
}

@keyframes hue {
  from {
    filter: hue-rotate(0);
  }
  to {
    filter: hue-rotate(-360deg);
  }
}
@keyframes spin {
  from {
    transform: rotateY(0) var(--arrange);
  }
  to {
    transform: rotateY(1turn) var(--arrange);
  }
}
@keyframes focal {
  from {
    perspective-origin: 25% -25%;
  }
  to {
    perspective-origin: 25% 125%;
  }
}